<template>
  <el-row>
    <el-col el-col :span="22" :offset="1">
      <el-form
        style="margin-top: 20px"
        label-suffix=":"
        label-width="120px"
        :model="models"
        :rules="rules"
        ref="qmGenForm"
        class="qm-gen-form"
        :disabled="pageAction === 'view'"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="应用系统" prop="model.systemName">
              <el-input type="text" v-model="models.model.systemName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属单位" prop="model.company">
              <el-input type="text" v-model="models.model.company"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="联系人" prop="model.contacter">
              <el-input type="text" v-model="models.model.contacter"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系方式" prop="model.telephone">
              <el-input type="text" placeholder="电话号码" v-model="models.model.telephone"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="有效开始时间" prop="model.startTime">
              <el-date-picker
                v-model="models.model.startTime"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="有效结束时间" prop="model.endTime">
              <el-date-picker
                v-model="models.model.endTime"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                required
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="客户端ID" prop="model.clientId">
              <el-input type="text" v-model="models.model.clientId"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="分配密钥" prop="model.clientSecret">
              <el-input type="text" v-model="models.model.clientSecret"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="最大连接数" prop="model.maxLoginUsersCount">
              <el-input type="number" v-model="models.model.maxLoginUsersCount"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否启用">
              <el-checkbox size="medium" v-model="models.model.isEnabled"></el-checkbox>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="重定向地址" prop="model.redirectUris">
              <el-input
                type="textarea"
                :rows="2"
                placeholder="例如:http://www.baidu.com;http://www.taobao.com"
                v-model="models.model.redirectUris"
              ></el-input>
              <font color="red">(多个请用英文分号;隔开)</font>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="代理类全路径">
              <el-input
                type="text"
                placeholder="例如：com.qm.boot.common.proxy.ProxyName"
                v-model="models.model.className"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: "sso-ssoSystem-create",
  props: {
    models: Object,
    controlData: Object,
    pageAction: String,
  },
  data() {
    return {
      rules: {
        "model.systemName": [
          { required: true, message: "必填项", trigger: "blur" },
        ],
        "model.company": [
          { required: true, message: "必填项", trigger: "blur" },
        ],
        "model.contacter": [
          { required: true, message: "必填项", trigger: "blur" },
        ],
        "model.telephone": [
          { required: true, message: "必填项", trigger: "blur" },
        ],
        "model.startTime": [
          { required: true, message: "必填项", trigger: "blur" },
        ],
        "model.endTime": [
          { required: true, message: "必填项", trigger: "blur" },
        ],
        "model.clientId": [
          { required: true, message: "必填项", trigger: "blur" },
        ],
        "model.clientSecret": [
          { required: true, message: "必填项", trigger: "blur" },
        ],
        "model.maxLoginUsersCount": [
          { required: true, message: "必填项", trigger: "blur" },
        ],
        "model.redirectUris": [
          { required: true, message: "必填项", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    getTime(dateStr) {
      let date = new Date(dateStr);
      return date.getTime();
    },
    onBeforeSave(postModel) {
      if (
        this.getTime(postModel.model.startTime) >=
        this.getTime(postModel.model.endTime)
      ) {
        this.$message({
          message: "结束时间必须大于开始时间",
          type: "error",
        });
        return false;
      }
      return true;
    },
  },
};
</script>

<style scoped>
</style>